<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document对象</title>
    <style>
        .div01{
            border: 10px solid black;
        }
    </style>
</head>
<body>
<script>
    //通过document对象
    //creatElement("标签名称") 创建指定的标签、元素、对象
    var div = document.createElement("div");
    div.style.height = "300px";
    div.style.width = "300px";
    div.style.backgroundColor = "red";
    //创建文本节点  一个标签包括标签本身  属性/属性值  文本内容  事件---->function
    var textNode = document.createTextNode("我是第一个div元素");
    //append("节点名称")  通过元素添加节点信息
    div.append(textNode);
    var attr = document.createAttribute("class");
    attr.nodeValue="div01";
  div.setAttributeNode(attr);
    // div.className="div01";
    // div.setAttribute("class","div01");

    var bodyEle = document.getElementsByTagName("body")[0];
    bodyEle.appendChild(div);


</script>
</body>
</html>